<template>
  <div>
    <el-row :gutter="20">
      <el-col :span="8">
        <d2-crud
          :columns="columns"
          :data="dataList"
          index-row
          :loading-options="loadingOptions"
          :options="options"
          selection-row
          @row-click="rowClick"
          @selection-change="selectChange"
          @edit="setWorkflow"
          ref="d2Crud">
          <div class="title" slot="header">
            <span class="text">执法门类</span>
          </div>
        </d2-crud>
      </el-col>
      <el-col :span="16">
        <d2-crud
          :columns="columns2"
          :data="data"
          index-row
          :loading-options="loadingOptions"
          :options="options"
          selection-row
          @row-click="rowClick2"
          @selection-change="selectChange2"
          :pagination="pagination"
          @pagination-current-change="paginationCurrentChange"
          ref="d2Crud2">
          <div class="title" slot="header">
            <span class="text">流程列表</span>
            <el-radio-group v-model="radio" style="margin-left:25px;">
              <el-radio v-for="(value, index) in radios" :label="index" :key="index">{{value}}</el-radio>
            </el-radio-group>
            <el-button type="primary" size="mini" style="float:right;margin-top:9px;margin-right:8px;" @click="configure">关联配置</el-button>
          </div>
        </d2-crud>
      </el-col>
    </el-row>
    <div class="clearfix"></div>
    <!-- <detail-info v-model="detailVisible" ref="detailFrom" @submit="loadDistData"/> -->
  </div>
</template>

<script>
import dictCache from "@/assets/utils/cache-dict-util";
import utils from '@/assets/utils/zhzf-util';
import detailInfo from './detail-info';
import dictApi from "@/api/system/dict";
import workflowApi from '@/api/system/workflow';
export default {
  name: "workflow-set",
  components: {detailInfo},
  data () {
    return {
        dataList:[],
        data:[],
        columns: [
          {title: "名称", key: "name", sortable: "true"},
          {title: "编码", key: "code", sortable: "true"},
        ],
        columns2:[
          {title:'流程名称', key:'name'},
          {title:'流程键值',key:'key'},
        ],
        loadingOptions: {
          text: '正在加载数据',
          spinner: 'el-icon-loading',
          background: 'rgba(0, 0, 0, 0.8)'
        },
        options: {
          stripe: true
        },
        pagination: {
          currentPage: 1,
          pageSize: 15,
          total: 0
        },
        detailVisible:false,
        selected:[],
        selected2:[],
        radios:[],
        radio:0,
        remark:{},
    };
  },
  mounted(){
      this.loadDistData()
      this.fetchData()
  },
  methods:{
      async loadDistData() {
        let res = await dictApi.list(); //执行类型
        if(res){
            let tempArr = [], data = res.data;
            for(let i = 0; i < data.length; i++){
              if(data[i].type=="0055"){
                tempArr.push(data[i]);
              }
            }
            this.dataList = tempArr;
        }
        if(res){
            let tempArr = [], data = res.data;
            for(let i = 0; i < data.length; i++){
              if(data[i].type=="0048"){
                tempArr.push(data[i].name);
              }
            }
            this.radios = tempArr;
        }

      },
      rowClick(row) {
        this.$refs.d2Crud.$children[0].toggleRowSelection(row);
      },
      rowClick2(row){
        this.$refs.d2Crud2.$children[2].toggleRowSelection(row);
      },
      selectChange(selection) {
        this.selected = selection;
      },
      selectChange2(selection) {
        this.selected2 = selection;
      },
      async configure(){
        this.remark.zfml = this.selected[0].name;
        this.remark[this.radios[this.radio]] = this.selected2[0].key;
        this.selected[0].remark = this.remark;
        let detail = this.selected[0];
        detail.remark = JSON.stringify(this.remark);
        let res = await dictApi.mod(detail);
        if(res.ok){
          utils.showTips(res.ok ? "关联配置成功" :"关联配置失败", res.ok);
        }
      },
      setWorkflow({row}){
          window.event.stopPropagation(); //阻止冒泡
          row = row || {};
          this.detailVisible = true;
          this.$refs.detailFrom.initPage(row);
      },
      paginationCurrentChange(currentPage) {
        this.pagination.currentPage = currentPage;
        this.fetchData();
      },
      async fetchData() {
        this.loading = true;
        let res = await workflowApi.processPage({...this.pagination, latestVersion:true});
        this.data = res.data.rows;
        this.pagination.total = res.data.total || this.data.length;
        this.loading = false
      }
  }

}

</script>
<style lang="scss">
  .clearfix{
    content:'';
    clear:both;
  }
</style>